<template>
  <view class="page">
    <CommonNavbar :showBack="true"></CommonNavbar>

    <view class="main padding-sm radius-lg">
      <view class="header">
        <view class="flex-sub">
          <up-text size="28" color="#3D511D" text="每日日报"></up-text>
          <up-text size="14" color="#3D511D" text="每天一小记，成长智慧积" margin="60rpx 0 0 0"></up-text>
        </view>
        <view>
          <image src="/static/images/icon-calendar.png" style="width: 200rpx" mode="widthFix"></image>
        </view>
      </view>
      <view class="container">
        <!-- 基础信息 -->
        <view class="margin-top-xl">
          <view>
            <up-text prefixIcon="/static/images/icon-report_1.png" text="基础信息" color="#3D511D" size="28"
              iconStyle="width:64rpx;height:64rpx;margin-right:10rpx" align="center"></up-text>
          </view>
          <view class="bg-white radius-lg padding-lr padding-tb-lg margin-top-sm">
            <view class="flex justify-center align-center text-lightgray bg-gray padding-tb-sm"
              v-if="!state.reportInfo.dailyStatus">
              今日状态
            </view>
            <view class="flex align-center justify-center" v-else>
              <!-- <up-image width="32" height="32" :src="state.reportInfo.dailyStatus.url" bgColor="white"></up-image> -->
              <up-image width="32" height="32" :src="MOOD_LIST[state.reportInfo.dailyStatus].url"
                bgColor="white"></up-image>

              <!-- {{ state.reportInfo.dailyStatus.title }} -->
            </view>

            <view class="flex justify-center align-center text-lightgray margin-top-xs bg-gray padding-tb-sm">
              {{
                state.reportInfo.reportDate
                  ? dayjs(state.reportInfo.reportDate).format('YYYY-MM-DD')
                  : '请选择日期'
              }}
            </view>

            <up-input placeholder="请输入主题" :disabled="true"
              customStyle="height:96rpx;background:#F3F3F3;margin-top:10rpx" inputAlign="center" border="none"
              v-model="state.reportInfo.topic"></up-input>
          </view>
        </view>

        <!-- 表现评分 -->
        <view>
          <view class="margin-top-sm">
            <up-text prefixIcon="/static/images/icon-report_2.png" text="表现评分" color="#3D511D" size="28"
              iconStyle="width:50rpx;height:50rpx;margin-right:10rpx" align="center" margin="30rpx 0"></up-text>
          </view>
          <view class="bg-white radius-lg padding-lr padding-tb-lg margin-top-sm">
            <view class="margin-top-xl" v-for="(item, index) in state.academicList" :key="index">
              <up-text :text="item.title" size="24" align="center"></up-text>
              <view class="flex justify-between margin-tb padding-lr-xl">
                <view class="grade-item" :class="state.reportInfo[item.field] == subItem.value ? 'active' : ''"
                  v-for="(subItem, subIndex) in item.gradeList" :key="subIndex"
                  @click="state.reportInfo[item.field] = subItem.value">
                  {{ subItem.name }}
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 客观行为记录 -->
        <view class="margin-top-xl">
          <view>
            <up-text prefixIcon="/static/images/icon-report_3.png" text="客观行为记录" color="#3D511D" size="28"
              iconStyle="width:64rpx;height:64rpx;margin-right:10rpx" align="center"></up-text>
          </view>
          <view class="bg-white radius-lg padding margin-top-sm">
            <up-textarea height="300rpx" customStyle="background:#f3f3f3" border="none"
              v-model="state.reportInfo.behaviorObservation" placeholder="示例:'数学题做错后摔笔,经引导后重新计算并找出错误步骤'"></up-textarea>
          </view>
        </view>
        <!-- 今日亮点 -->
        <view class="margin-top-xl">
          <up-text prefixIcon="/static/images/icon-report_6.png" text="今日亮点" color="#3D511D" size="28"
            iconStyle="width:64rpx;height:64rpx;margin-right:10rpx" align="center"></up-text>
          <view class="bg-white radius-lg padding margin-top-sm">
            <up-textarea height="300rpx" customStyle="background:#f3f3f3" border="none"
              v-model="state.reportInfo.dailyHighlight" placeholder="如:'主动帮助同学捡起掉落的文具并安慰对方'"></up-textarea>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// import { createReportApi } from '@/api/report.js';
import dayjs from 'dayjs';
import { reportDetailApi } from '@/api/report';
import MOOD_LIST from '@/utils/constant';
onLoad((options) => {
  console.log('options', options)
  if (options.reportId) {
    getDetail(options.reportId);
  }
  state.reportInfo.reportDate = dayjs();
});
const state = reactive({
  reportInfo: {
    reportDate: '',
    studentId: '',
    dailyStatus: '',
    topic: '',
    subject: '语文',
    selfDecision: '',
    emotionManagement: '',
    ruleCompliance: '',
    socialInteraction: '',
    learningMotivation: '',
    creativeExecution: '',
    resilience: '',
    lifeManagement: '',
    behaviorObservation: '',
    dailyHighlight: '',
  },
  //学术考察维度列表
  academicList: [
    {
      title: '自主决策力',
      field: 'selfDecision', //自主决策力
      gradeList: [
        {
          name: '低',
          value: '1'
        },
        {
          name: '中',
          value: '2'
        },
        {
          name: '高',
          value: '3'
        },
      ]
    },
    {
      title: '情绪管理',
      field: 'emotionManagement', //情绪管理
      gradeList: [
        {
          name: '低',
          value: '1'
        },
        {
          name: '中',
          value: '2'
        },
        {
          name: '高',
          value: '3'
        },
      ]
    },
    {
      title: '规则遵守',
      field: 'ruleCompliance', //规则遵守
      gradeList: [
        {
          name: '低',
          value: '1'
        },
        {
          name: '中',
          value: '2'
        },
        {
          name: '高',
          value: '3'
        },
      ]
    },
    {
      title: '社交互动',
      field: 'socialInteraction', //社交互动
      gradeList: [
        {
          name: '低',
          value: '1'
        },
        {
          name: '中',
          value: '2'
        },
        {
          name: '高',
          value: '3'
        },
      ]
    },
    {
      title: '学习动力',
      field: 'learningMotivation', //学习动力
      gradeList: [
        {
          name: '低',
          value: '1'
        },
        {
          name: '中',
          value: '2'
        },
        {
          name: '高',
          value: '3'
        },
      ]
    },
    {
      title: '创意执行',
      field: 'creativeExecution', //创意执行
      gradeList: [
        {
          name: '低',
          value: '1'
        },
        {
          name: '中',
          value: '2'
        },
        {
          name: '高',
          value: '3'
        },
      ]
    },
    {
      title: '抗挫能力',
      field: 'resilience', //抗挫能力
      gradeList: [
        {
          name: '低',
          value: '1'
        },
        {
          name: '中',
          value: '2'
        },
        {
          name: '高',
          value: '3'
        },
      ]
    },
    {
      title: '生活自理',
      field: 'lifeManagement', //生活自理
      gradeList: [
        {
          name: '低',
          value: '1'
        },
        {
          name: '中',
          value: '2'
        },
        {
          name: '高',
          value: '3'
        },
      ]
    }
  ],
  isLoading: false,
  selectDatePicker: false,
  selectSubject: false
});

const getDetail = async (id) => {
  const params = {
    reportId: id
  }
  const result = await reportDetailApi(params)
  if (result.code === 200) {
    state.reportInfo = result.data;
  }
}
</script>

<style lang="scss" scoped>
.container {
  border-radius: 20px;
  padding: 40rpx 20rpx;
  margin-top: 20rpx;
  background: linear-gradient(97deg,
      rgba(212, 233, 162, 0.4) 0%,
      rgba(184, 211, 122, 0.32) 18.41%,
      rgba(210, 233, 158, 0.36) 42.07%,
      rgba(201, 236, 124, 0.36) 67.49%,
      rgba(233, 255, 184, 0.4) 85.9%);
}

.header {
  display: flex;
  justify-content: space-between;
  border-radius: 20px;
  background: var(--color_primary_auxiliary2, rgba(141, 184, 46, 0.45));
  padding: 40rpx 32rpx;
}

.grade-item {
  height: 62rpx;
  line-height: 62rpx;
  border-radius: 0;
  font-size: 28rpx;
  border: solid 1px #6d9319;
  color: #6d9319;
  text-align: center;
  padding: 0 20rpx;

  &.active {
    background: #6d9319;
    color: white;
  }
}

.bg-gray {
  background: #f3f3f3;
}

.class-item {
  background: #f3f3f3;
  width: 15%;
  color: #000;
  font-size: 28rpx;
  text-align: center;
  padding: 20rpx 0;

  &:not(:first-child) {
    margin-left: 20rpx;
  }

  &.active {
    background: #7da02f;
    color: white;
  }
}
</style>
